<template>
    <div>   
        <h2>用户数据分析</h2>
        <el-row class="mt10">
            <el-col :span="11">
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div class="container" id="box1" ref="boxone">
                    
                </div>
            </el-col>
            <el-col :span="11" :offset="1">
                <div class="container" id="box2">
                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script >
import { computed, onMounted ,ref } from '@vue/runtime-core'
import * as echarts from "echarts"
import { useStore } from 'vuex'
import {ajax} from "@/api"
export default {
    setup(){
        const store = useStore()
        const boxone = ref()
        const setEchartInit = ()=>{
            var myChart = echarts.init(boxone.value);
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '千锋商城 销量展示'
                },
                tooltip: {},
                legend: {
                data: ['销量']
                },
                xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                {
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        const userList = computed(()=>store.state.userList)
        const roleList  = computed(()=>store.state.roleList)


        const setChartInitTwo = (userList,roleList)=>{
           
            
            console.log(userList)
            console.log(roleList)
            var data = []
            roleList.forEach(item=>{
                if(userList.filter(value=>value.role==item.value).length>0){
                    data.push({
                        name:item.label,
                        value: userList.filter(value=>value.role==item.value).length 
                    })
                }
            })
            
            var myChart = echarts.init(document.getElementById("box2"));
            var option = {
                title: {
                    text: '人员分析'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                    name: '社区人员分析',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:data,
                    }
                ]
            };

            myChart.setOption(option);
        }
        const getDataLast = async ()=>{
            let {result,code} = await ajax.getrolelist();
            let res = await ajax.getuserlist();
            setChartInitTwo(res.result,result)
        }
        onMounted(()=>{
            setEchartInit()
            getDataLast();
        })



        return {
            boxone,
            userList,
            roleList
        }
    }
}
</script>


<style lang="scss" scoped>
.container{
    width:100%;
    height:400px;
    border-radius: 10px;
    border:1px solid #333;
}
</style>